<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <div style="margin-top: 20px">
        <el-radio-group v-model="radio2" size="medium" @change="collect">
          <el-radio-button label="全部"></el-radio-button>
          <el-radio-button label="收藏"></el-radio-button>
        </el-radio-group>
        <el-upload
          class="upload-demo"
          action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
          :headers="headers"
          name="image"
          :on-success="dosuccess"
          :show-file-list="false"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="8" v-for="(item, index) in allPic" :key="index">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="item.url" class="image" />
          <div class="habby">
            <i :class="item.is_collected?'el-icon-star-on':'el-icon-star-off'" @click="save(item)"></i>
            <i class="el-icon-delete" @click="deletePic(item.id)"></i>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="picPage">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totalPage"
        @current-change="currentPage"
        :page-size="6"
      ></el-pagination>
    </div>
  </el-card>
</template>

<script>
import { allMaterial, delePic, collectPic } from "@/api/material.js";
export default {
  name: "material",
  data() {
    return {
      radio2: "全部",
      allPic: [],
      page: 1,
      per_page: 6,
      totalPage: 0,
      headers: {
        Authorization: `Bearer ${
          JSON.parse(window.localStorage.getItem("userInfo")).token
        }`
      }
    };
  },
  async created() {
    this.getmaterial(1, false);
  },
  methods: {
    //全部收藏tab栏
    async collect(value) {
      // console.log(value);
      if (value == "收藏") {
        this.getmaterial(1, true);
      } else {
        this.getmaterial(1, false);
      }
    },
    //页码点击
    async currentPage(p) {
      this.getmaterial(p, this.radio2 == "收藏");
    },
    async getmaterial(page, collect) {
      let res = await allMaterial({
        page: page,
        collect: collect,
        per_page: this.per_page
      });
      this.allPic = res.data.data.results;
      this.totalPage = res.data.data.total_count;
    },
    //删除图片
    async deletePic(id) {
      let res = await delePic(id);
      this.$message.success("删除成功");
      this.getmaterial(1, this.radio2 == "收藏");
    },
    //收藏或者取消收藏图片
    async save(item) {
      item.is_collected = !item.is_collected;
      let res = await collectPic(item.id, item.is_collected);
      this.getmaterial(1);
    },
    dosuccess() {
      this.getmaterial(1, false);
      this.$message.success('上传成功')
    }
  }
};
</script>

<style lang="less" scoped>
.upload-demo {
  float: right;
}
.el-col {
  height: 200px;
  margin-bottom: 20px;
  .image {
    width: 100%;
    height: 160px;
  }
  .habby {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
  }
}
.picPage {
  text-align: center;
}
</style>